<template>
     <!--客户管理-->
    <div class="home-box">
        <el-container class="home-container">
            <!-- 头部区域 -->
            <el-header>
                <div>
                    <span style="font-size: 20px;color: white">汽车后台管理系统</span>
                </div>
                <el-dropdown @command="handleCommand">
                    <el-avatar :src=userList.avatar></el-avatar>
                    <span style="font-weight: bolder;color: white">{{userList.userName}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="1">个人中心</el-dropdown-item>
                        <el-dropdown-item command="2">修改密码</el-dropdown-item>
                        <el-dropdown-item command="3">退出登录</el-dropdown-item>

                    </el-dropdown-menu>
                </el-dropdown>

            </el-header>
            <!-- 页面主体区域 -->
            <el-container>
                <!-- 侧边栏 -->
                <!-- 侧边栏,宽度根据是否折叠进行设置 -->
                <el-aside :width="isCollapse ? '54px':'200px'">
                    <!-- 伸缩侧边栏按钮 -->
                    <div class="toggle-button" @click="toggleCollapse">|||</div>
                    <!-- 侧边栏菜单 -->
                    <el-menu
                            background-color="#333744"
                            text-color="#fff"
                            :collapse="isCollapse"
                            router
                            active-text-color="#ffd04b">
                       <NavMenu :menuData="menuList"></NavMenu>
                    </el-menu>
                </el-aside>
                <!-- 主体结构 -->
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    //导入组件
    import NavMenu from "../components/NavMenu";
    export default {
        name: "customer",
        //注册组件
        components:{
            NavMenu:NavMenu
        },
        data(){
            return {
                isCollapse:false,
                menuList:[],
                userList:{}
            }
        },
        created() {
            //根据token获取用户的信息
            this.userinfomation();
            //初始化菜单
            this.menu();

        },
        methods: {

            handleCommand(command) {
                if(command==1) {
                    this.$message('欢迎您' +this.userList.userName);
                }
                if(command==3){
                    sessionStorage.clear();
                    this.$router.push({path:'/login'})

                }
            },
            toggleCollapse(){
                this.isCollapse=!this.isCollapse;
            },
            userinfomation(){
                var that=this;

                var token = sessionStorage.getItem("token");

                this.$http.get("/system/parse?token="+token).then(function (returnResult) {

                    that.userList=returnResult.data.result.userinfomation.userInfo;

                })

            },
            menu(){
                var that=this;
                this.$http.get("/system/menu/selFunction").then(function (returnResult) {
                    that.menuList=returnResult.data.result.father;


                })
            }
        }
    }
</script>

<style scoped lang="less">
    .home-box{
        height: 100%;
    }
    .home-container {
        height: 100%;
    }
    .el-header{
        background-color:#3C8DBC;
        display: flex;
        justify-content: space-between;
        padding-left: 0px;
        align-items: center;
        color: white;
        font-size: 20px;
        > div{
            display: flex;
            align-items: center;
            span{
                margin-left: 15px;
            }
        }
    }
    .el-aside{
        background-color:#333744;
        height: 100%;
        .el-menu{
            border-right: none;
        }
    }
    .el-main{
        background-color:#eaedf1;
    }
    .toggle-button{
        display: flex;
        justify-content: center;
        color: white;
    }
</style>